Skip to content

Conversation

yuripourre
Copy link
Contributor

@yuripourre yuripourre commented Aug 23, 2025

Title

Add material preview

Summary

Add material preview in the assets-browser

Changes Made

Add material thumbnail

  • Modifies the material item to display the material thumbnail. The code is as simple as possible so instead of generating a static thumbnail, the icon is an actual canvas rendering the sphere. I can add some optimization but I am creating this PR to get some preliminary feedback.

Benefits

  • Quality of life, instead clicking in the material, you can see how it looks in the thumbnail. You can still access the preview window by double-clicking on it.
Screenshot From 2025-08-23 13-43-44

@julien-moreau
Copy link
Contributor

I have plans to do it including 3D models.
The main problem here is the limitation in memory. I experienced that if you have too much materials in a folder, with 4K textures or whatever, the memory limit will be reached and the editor will crash. In version 4 I opted for an offscreen canvas that computes the screenshots in a worker, one by one.
In my previous experiences, I also worked with designers that created too complex 3D models that blocked the main thread (editor did not respond) until the 3d model is loaded.

@yuripourre
Copy link
Contributor Author

I understand, thanks for explaining! I added because saves me a lot of time and the editor 4 had it.

@julien-moreau what do you think about letting those previous features behind a preference flag?

Copy link
Contributor

@julien-moreau julien-moreau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that this feature is important, I can propose to do it quickly for materials, then I'll let you add support of meshes (and more if needed like procedural textures, etc. ?)

@yuripourre
Copy link
Contributor Author

@julien-moreau That works for me! If you are busy, you can also let me know what do you have in mind and I can try.

If memory is the issue, we can create thumbnails of 512x512 size. Or a more overkill approach, we could save the thumbnails in an electron-store and load them on-the-fly based on the visibility.

If the main problem is the editor hanging we could also load the thumbnails async.

Or we could have both.

@julien-moreau
Copy link
Contributor

Exact, what I have in mind is that we create thumbnails of 256x256 (like textures that are resized in the assets browser) and then save them to a cache. Today there is a .export-cache.json file that is created in the assets folder. We could add something like .thumbnail-cache.json where keys are relative paths to assets and values are base64 encoded 256x256 images.
What do you think?

@yuripourre
Copy link
Contributor Author

That works! @julien-moreau I will have some free time today. I can draft something in this PR. Is that ok?

@julien-moreau
Copy link
Contributor

I think we can close this one

@yuripourre
Copy link
Contributor Author

@julien-moreau with pleasure!

@yuripourre yuripourre closed this Sep 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants